<template>
  <div class="wrap-content">
    <div class="title">我的</div>
    <div class="item padding-0-20">
      <div class="desc">别名</div>
      <div>
        <input id="name" class="input-bg" @blur="fixScroll" />
      </div>
    </div>
    <div class="item padding-0-20">
      <div class="desc">地区</div>
      <div>
        <input id="region" class="input-bg" @blur="fixScroll" />
      </div>
    </div>
    <div class="center_horizontal" style="margin-top: 20px;">
      <div class="btn" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "profile",
  components: {},
  data() {
    return {};
  },
  mounted() {
    let name = document.querySelector("#name").value;
    let region = document.querySelector("#region").value;
  },
  methods: {
    fixScroll() {
      this.$nextTick(() => {
        window.scrollTo(0, document.body.scrollTop + 1);
        document.body.scrollTop >= 1 &&
          window.scrollTo(0, document.body.scrollTop - 1);
      });
    },
    save(e) {
      let name = document.querySelector("#name").value;
      let region = document.querySelector("#region").value;
      this.$toast({
        message: `别名: ${name}, 地区: ${region}`
      });
      let query = {};
      this.$router.push({path: `/demo`, query: query});
    }
  }
};
</script>

<style lang="less" scoped>
.padding-0-20 {
  padding: 0 20px;
}
.wrap-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.item {
  .desc {
    color: #666;
    margin-top: 10px;
    margin-bottom: 5px;
  }
}
.input-bg {
  width: 100%;
  height: 40px;
  padding: 3px 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(221, 221, 221, 1);
  border-radius: 4px;
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 36px;
  background: rgba(244, 41, 51, 1);
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
}
</style>